<template>
	<view class="content">
		<scroll-view class="nav-left" scroll-y scroll-with-animation>
			<view
				ref="navTab"
				class="nav-left-item"
				@tap="changeTabSort(index)"
				:key="index"
				:class="index === currentTabSort ? 'active' : ''"
				v-for="(item, index) in listArrs"
			>
				<view 
				:style="{background: index === currentTabSort?'#2BAD4C':''}"
				class="bar"></view>
				{{ item.appname }}
			</view>
		</scroll-view>
		<swiper class="swiper" 
		:vertical="vertical" 
		:disable-touch="disableTouch" 
		:current="currentTabSort" 
		@change="swiperTabSort">
			<swiper-item 
			v-for="(listitem, index) in list" 
			:key="index">
				<scroll-view 
				style="height: 100%;" 
				scroll-y="true" 
				scroll-with-animation>
					<view class="cont-box">
						<view class="cont-info">
							<view class="info-title">
								<image
								class="icon" 
								lazy-load 
								src="/static/index_icon_21.png"></image>
								<view class="title">
									{{listArrs[index].appname}}
								</view>
							</view>
							<view class="cells">
								<view class="cell" @click="gotabel(obj)" v-for="obj in listitem" :key="obj.id">
									<image 
									class="icon" 
									lazy-load 
									src="/static/index_icon_20.png"></image>
									<view class="title">{{obj.FolderName}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		bpmUrl
	} from "@/common/config.js"
	import Tips from '@/common/utils/tips.js'
	import {
		ajax,
		getUserInfo
	} from '@/common/common.js'
	export default {
		data(){
			return{
				disableTouch:false,
				vertical:true,
				currentTabSort:0,
				listArrs: [],
				list: [],
				bpmUrl: bpmUrl
			}
		},
		onLoad() {
			Tips.loading()
			this.getapplytitle()
		},
		methods: {
			
			//获取我的待办
			getapplytitle() {
				let user = getUserInfo()
				console.log(user)
				let params = {
					paramasMap : {},
					headersMap: {
						sysid: "bpm",
						syspwd: "pass",
						userid: user.bpmUid
					},
					url: this.bpmUrl + "/rest/task/myprocess/list"
				};
				ajax({
					url: '/bpm/get',
					method: 'POST',
					data: params,
					success: res => {
						console.log('可发起的',res)
						Tips.loaded()
						this.listArrs = res.data.data
						this.listArrs.forEach(item => {
							this.list.push(item.processList)
						})
					},
					fail: res => {
						Tips.toast('获取失败','none')
						Tips.loaded()
					}
				})
			},
			gotabel(item){
				// console.log("1")
				// uni.navigateTo({
				// 	url:"/pages/newdealers/newlist/newlist"
				// })
				uni.navigateTo({
					// url:`/pages/process/process-start/process-start?processid=${item.processid}&orUnid=${item.WF_OrUnid}`
					url:`/pages/process/process-detail/process-detail?processid=${item.processid}&orUnid=${item.WF_OrUnid}`
				})
			},
			changeTabSort(index) {
				this.currentTabSort = index
			},
			swiperTabSort(e) {
				var index = e.detail.current;
				this.changeTabSort(index);
			}
		}
	}

</script>

<style scoped lang="scss">
.content {
	display: flex;
	justify-content: space-between;
	flex-flow: nowrap;
	width: 100%;
	.active {
		background: rgba(43,173,76,0.1);
		border-right: 0;
	}
	.nav-left {
		width: 30%;
		background: #FFFFFF;
		box-sizing: border-box;
		.nav-left-item {
			height: 100upx;
			font-size: 28rpx;
			color: #353535;
			display: flex;
			align-items: center;
			flex-flow: nowrap;
			justify-content: left;
			.bar{
				width: 3px;
				height: 25rpx;
				margin-right: 10rpx;
			}
		}
	}
	.swiper {
		width: 70%;
		height: 100vh;
		box-sizing: border-box;
		.cont-box{
			padding: 25rpx 15rpx;
			box-sizing: border-box;
			.cont-info{
				background: #FFFFFF;
				border-radius: 10rpx;
				.info-title{
					border-radius: 10rpx 10rpx 0 0;
					padding: 15rpx 20rpx;
					box-sizing: border-box;
					background: rgba(43,173,76,0.4);
					display: flex;
					flex-flow: nowrap;
					align-items: center;
					justify-content: flex-start;
					.icon{
						display: block;
						width: 35rpx;
						height: 35rpx;
						margin-right: 10rpx;
						background: rgba(43,173,76,0.7);
					}
					.title{
						font-size: 28rpx;
						color: #353535;
					}
				}
				.cells{
					padding: 25rpx 20rpx;
					box-sizing: border-box;
					display: flex;
					flex-flow: wrap;
					align-items: center;
					justify-content: space-between;
					.cell{
						width: 50%;
						display: flex;
						flex-flow: column;
						align-items: center;
						margin-bottom: 30rpx;
						.icon{
							width: 40rpx;
							height: 40rpx;
							margin-bottom: 5rpx;
						}
						.title{
							box-sizing: border-box;
							font-size: 24rpx;
							color: #353535;
							width: 180rpx;
							height: 70rpx;
							text-align: center;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient:vertical;
						}
					}
				}
			}
		}
	}
}

</style>
